<template>
  <div id="file" style="padding: 20px;">
    <el-row :gutter="20">
      <el-col :span="5" :xs="24">
        <div class="head-container">
          <el-input placeholder="请输入文件或文件夹名称" v-model="filterText" style="margin-bottom: 20px" clearable size="small"
            prefix-icon="el-icon-search" />
        </div>

        <div class="head-container">
          <el-tree class="filter-tree" :data="fileTrees" :props="defaultProps" highlight-current
            :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19" :xs="24">
        <el-upload v-if="path != ''" :action="VUE_APP_BASE_API + '/file/template/upload'" drag multiple
          :headers="{ Authorization: 'Bearer ' + token }" list-type="picture-card" :data="{ path: path }" ref="fileUpload"
          :file-list="fileList" :on-success="success" :before-upload="beforeAvatarUpload">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }" style="height: 100%;width: 100%;">
            <img v-if="isImage(file.url)" class="el-upload-list__item-thumbnail" :src="file.url"
              onerror="this.src='/error.jpeg'">
            <img v-else-if="isVideo(file.url)" class="el-upload-list__item-thumbnail" src="/video.png">
            <img v-else class="el-upload-list__item-thumbnail" src="/unknown.png">
            <span class="el-upload-list__item-actions">
              <span v-if="isImage(file.url)" class="el-upload-list__item-preview" @click="handleImageCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span v-else-if="isVideo(file.url)" class="el-upload-list__item-preview"
                @click="handleVideoCardPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download"></i>
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogImageVisible" width="1600px">
          <img style="max-height: 750px;max-width: 100%;" :src="dialogImageUrl" onerror="this.src='/error.jpeg'" />
        </el-dialog>
        <el-dialog :visible.sync="dialogVideoVisible" width="1600px">
          <video width="100%" style="max-height: 750px;max-width: 100%;" :src="dialogVideoUrl" controls></video>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  getFileListApi,
  getTemplateDeleteApi,
  downloadApi
} from "@/api/project/file";
export default {
  name: "File",
  data() {
    return {
      filterText: '',
      dialogImageUrl: "",
      dialogVideoUrl: "",
      dialogImageVisible: false,
      dialogVideoVisible: false,
      imglist: ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'jfif', 'tif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'wmf', 'webp', 'avif', 'apng'],
      videolist: ['mp4', 'mov', 'avi', 'wmv', 'mpg', 'mpeg', 'rm', 'ram', 'swf', 'flv'],
      disabled: false,
      fileList: [],
      uploadList: [],
      token: getToken(),
      path: "",
      fileTrees: [
        {
          label: "勘察范例",
          children: [
            {
              label: "基本信息",
              children: [
                {
                  label: "管网图(GIS)资料",
                  children: [
                    {
                      label: "中压管网分布图",
                    },
                    {
                      label: "内部管网建设图",
                    }
                  ]
                }
              ]
            },
            {
              label: "园区外围中压管网",
              children: [
                {
                  label: "管网至主控阀",
                  children: [
                    {
                      label: "现场照片",
                    },
                    {
                      label: "沉降",
                    },
                    {
                      label: "管道暴露",
                    },
                    {
                      label: "施工工地",
                    },
                    {
                      label: "植被",
                    },
                    {
                      label: "重型机械碾压",
                    },
                    {
                      label: "容易触碰地方",
                    },
                    {
                      label: "化粪池",
                    },
                    {
                      label: "地铁线",
                    },
                    {
                      label: "电力电缆交汇处",
                    },
                    {
                      label: "雨污管交汇处",
                    }
                  ]
                }
              ]
            },
            {
              label: "燃气主控阀",
              children: [
                {
                  label: "主控阀",
                  children: [
                    {
                      label: "主控阀",
                    }
                  ]
                }
              ]
            },
            {
              label: "园区内中压管网",
              children: [
                {
                  label: "主控阀至调压设施",
                  children: [
                    {
                      label: "现场照片",
                    },
                    {
                      label: "穿越公路",
                    },
                    {
                      label: "根系植物",
                    },
                    {
                      label: "沉降明显",
                    },
                    {
                      label: "管道暴露",
                    },
                    {
                      label: "施工工地",
                    },
                    {
                      label: "车辆碾压",
                    },
                    {
                      label: "化粪池",
                    },
                    {
                      label: "电气交汇",
                    },
                    {
                      label: "主控阀至调压设施",
                    }
                  ]
                },
                {
                  label: "燃气中压管网信息",
                  children: [
                    {
                      label: "管道弯曲多",
                    }
                  ]
                }
              ]
            },
            {
              label: "调压设施",
              children: [
                {
                  label: "调压设施",
                  children: [
                    {
                      label: "现场照片",
                    },
                    {
                      label: "立管占压",
                    },
                    {
                      label: "立管生锈",
                    },
                    {
                      label: "立管防腐脱落",
                    },
                    {
                      label: "生锈",
                    },
                    {
                      label: "泄漏",
                    },
                    {
                      label: "软管变形(沉降)",
                    }
                  ]
                },
                {
                  label: "现场情况",
                  children: [
                    {
                      label: "门锁损坏"
                    },
                    {
                      label: "箱体、支架损坏生锈"
                    },
                    {
                      label: "调压柜(箱)门受影响"
                    },
                    {
                      label: "过滤器杂质过多"
                    },
                    {
                      label: "压力表异常"
                    },
                    {
                      label: "电磁阀走线不规范无有效连接"
                    }
                  ]
                }
              ]
            },
            {
              label: "园区内低压管网",
              children: [
                {
                  label: "调压设施至有限空间(厨房、车间、锅炉)",
                  children: [
                    {
                      label: "现场照片"
                    },
                    {
                      label: "标志桩损坏"
                    },
                    {
                      label: "标志桩需要增加"
                    },
                    {
                      label: "套管生锈"
                    },
                    {
                      label: "套管未封堵"
                    },
                    {
                      label: "套管脱离地面"
                    },
                    {
                      label: "盘管封埋地面"
                    },
                    {
                      label: "盘管生锈"
                    },
                    {
                      label: "盘管损坏"
                    },
                    {
                      label: "立管沉降"
                    },
                    {
                      label: "立管占压"
                    },
                    {
                      label: "立管支架损坏"
                    },
                    {
                      label: "立管预留管生锈"
                    },
                    {
                      label: "立管生锈"
                    }
                  ]
                },
                {
                  label: "其他现场情况",
                  children: [
                    {
                      label: "电缆缠绕",
                    },
                    {
                      label: "绿化遮挡",
                    },
                    {
                      label: "管道异常",
                    }
                  ]
                }
              ]
            },
            {
              label: "有限空间场景",
              children: [
                {
                  label: "有限空间(厨房、生产车间、锅炉)",
                  children: [
                    {
                      label: "现场照片"
                    },
                    {
                      label: "阀门损坏",
                    },
                    {
                      label: "管道占压",
                    },
                    {
                      label: "管道法兰生锈",
                    }
                  ]
                },
                {
                  label: "配置情况",
                  children: [
                    {
                      label: "有限空间全景图",
                    },
                    {
                      label: "管道设备连接图",
                    }
                  ]
                }
              ]
            },
          ],
        }
      ],
      defaultProps: {
        children: "children",
        label: "label",
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    isImage(path) {
      let type = path.split(".")[1]
      let result = this.imglist.some((item) => {
        return type == item
      })
      if (result) {
        return true
      }
      return false
    },
    isVideo(path) {
      let type = path.split(".")[1]
      let result = this.videolist.some((item) => {
        return type == item
      })
      if (result) {
        return true
      }
      return false
    },
    getFileList(path) {
      getFileListApi(path).then(response => {
        if (response.code == 200) {
          if (response.data.length != 0) {
            Array.from(response.data).forEach(item => {
              this.fileList.push({ url: item })
            });
          }
        }
      })
    },
    handleNodeClick(data, nodeData) {
      console.log(this.token);
      this.fileList.splice(0, this.fileList.length);
      if (nodeData.childNodes.length == 0) {
        this.path = nodeData.parent.parent.parent.data.label + "/" + nodeData.parent.parent.data.label + "/" + nodeData.parent.data.label + "/" + nodeData.data.label
        this.getFileList(this.path);
      } else {
        this.path = ''
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    beforeAvatarUpload(file) {
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isLt100M) {
        this.$message.error('上传文件大小不能超过 100MB!');
      }
      return isLt100M;
    },
    handleDownload(file) {
      downloadApi(file.url).then(response => {
        let blob = new Blob([response.data], {
          type: response.data.type,
        });
        let fileName = response.headers["content-disposition"].split("=")[1];
        this.$download.saveAs(blob, fileName);
      })
    },
    handleRemove(file) {
      if (confirm("确认删除该文件")) {
        getTemplateDeleteApi(file.url).then(response => {
          if (response.code == 200) {
            const index = this.fileList.findIndex((item) => {
              return item.uid === file.uid
            })
            this.fileList.splice(index, 1)
            this.$message.success('删除成功');
          } else {
            this.$message.error('删除失败');
          }
        })
      }
    },
    handleImageCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImageVisible = true;
    },
    handleVideoCardPreview(file) {
      this.dialogVideoUrl = file.url;
      this.dialogVideoVisible = true;
    },
    success(response, file, fileList) {
      if (fileList.every(item => item.status == "success")) {
        if (response.code == 200) {
          this.uploadList.splice(0, this.uploadList.length);
          Array.from(response.data).forEach(item => {
            this.uploadList.push({ url: item })
          });
          this.uploadedSuccessfully()
        } else {
          fileList.pop();
        }
      }
    },
    // 上传结束处理
    uploadedSuccessfully() {
      this.fileList = this.uploadList;
      this.uploadList = [];
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/InspectionFrame.scss";
</style>

<style lang="scss">
#file {
  .el-upload--picture-card {
    border: 0px;
  }

  .el-upload-dragger {
    width: 148px;
    height: 148px;
  }

  .el-upload-list__item {
    transition: none !important;
  }

  .el-dialog__body {
    text-align: center;
  }
}
</style>
